<template>
  <div class="app-container">
    <el-row :gutter="20" justify="center" style="margin-top: 20px;">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in operations" :key="index">
        <el-card shadow="hover" style="margin-bottom: 20px;">
          <div class="card-content" @click="handleOperation(item.type)">
            <el-button class="operation-button" :type="item.buttonType">{{ item.name }}</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElButton, ElCard, ElRow, ElCol } from 'element-plus';

const operations = ref([
  { name: '本地GPT学术版', type: 'operation1', buttonType: 'primary' },
  { name: '本地DeepSeek', type: 'operation2', buttonType: 'success' },
  { name: '通义千问', type: 'operation3', buttonType: 'warning' },
  { name: '星火讯飞', type: 'operation4', buttonType: 'warning' },
  { name: '文心一言', type: 'operation5', buttonType: 'warning' },
  { name: 'ChatGLM', type: 'operation6', buttonType: 'warning' },
  { name: 'DeepSeek官方版', type: 'operation7', buttonType: 'warning' },
  { name: 'Stable diffusion', type: 'operation8', buttonType: 'warning' },
  { name: 'AIGC检测1', type: 'operation9', buttonType: 'warning' },
  { name: 'AIGC检测2', type: 'operation10', buttonType: 'warning' },
]);

function handleOperation(operationType) {
  let url = "";
  switch (operationType) {
    case 'operation1':
      url = 'https://acgpt.swjtuhc.top:12443/';
      break;
    case 'operation2':
      url = 'https://maxkb.swjtuhc.top:12443/ui/chat/baf943bcaa8a7fd3';
      break;
    case 'operation3':
      url = 'https://tongyi.aliyun.com/';
      break;
    case 'operation4':
      url = 'https://xinghuo.xfyun.cn/';
      break;
    case 'operation5':
      url = 'https://yiyan.baidu.com/';
      break;
    case 'operation6':
      url = 'https://chatglm.cn/';
      break;
    case 'operation7':
      url = 'https://www.deepseek.com/';
      break;
    case 'operation8':
      url = 'https://xgsd.swjtuhc.top:12443/';
      break;
    case 'operation9':
      url = 'https://isgen.ai/zh-CN';
      break;
    case 'operation10':
      url = 'https://matrix.tencent.com/ai-detect/ai_gen';
      break;
    default:
      console.log('未知操作');
      return;
  }
  window.open(url, '_blank');
}
</script>

<style scoped>
.operation-button {
  width: 100%;
  height: 100%;
  font-size: 16px;
}

.card-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  cursor: pointer;
}
</style>